<template>
  <div class="main-div">
    <div :class="showPage?tablePageClassName:tableNoPageClassName">
      <el-table :data="data"
                :border="showBorder"
                :stripe="showStripe"
                :highlight-current-row="needOneSelect"
                @current-change="handleCurrentChange"
                v-loading="loading"
                :loading="loading"
                :max-height="maxHeight"
                :height="height"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" v-if="needMoreSelect" fixed="left" align="center"/>
        <el-table-column type="index" label="序号" width="80" v-if="showNo" fixed="left" align="center"/>
        <el-table-column v-for="item in columns"
                         :key="item.prop"
                         :prop="item.prop"
                         :label="item.label"
                         :width="item.width"
                         :fixed="item.fixed ? item.fixed : false"
                         :align="item.align ? item.align : 'center'"
                         :header-align="item.headerAlign ? item.headerAlign : 'center'"
                         :show-overflow-tooltip="true"/>
        <el-table-column v-if="$slots.action"
                         :key="actionConfig.prop"
                         :prop="actionConfig.prop"
                         :label="actionConfig.label"
                         :width="actionConfig.width"
                         :fixed="actionConfig.fixed ? actionConfig.fixed : false"
                         :align="actionConfig.align ? actionConfig.align : 'center'"
                         :header-align="actionConfig.headerAlign ? actionConfig.headerAlign : 'center'"
        >
          <template #default="scope">
            <slot name="action" :row="scope.row" :column="scope.column" :$index="scope.$index"/>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div :class="pageClassName" v-if="showPage">
      <el-pagination v-model:current-page="pagination.currentPage"
                     v-model:page-size="pagination.pageSize"
                     v-model:total="pagination.total"
                     v-model:page-sizes="pagination.pageSizes"
                     layout="total, sizes, prev, pager, next, jumper"
                     @size-change="sizeChange"
                     @current-change="currentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  showPage: {
    type: Boolean,
    default: true
  },
  showNo: {
    type: Boolean,
    default: false
  },
  showBorder: {
    type: Boolean,
    default: false
  },
  showStripe: {
    type: Boolean,
    default: false
  },
  needOneSelect: {
    type: Boolean,
    default: false
  },
  needMoreSelect: {
    type: Boolean,
    default: false
  },
  data: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array<any>,
    default: () => []
  },
  pagination: {
    type: Object,
    default: () => ({})
  },
  tablePageClassName: {
    type: String,
    default: 'main-table-page'
  },
  tableNoPageClassName: {
    type: String,
    default: 'main-table-no-page'
  },
  pageClassName: {
    type: String,
    default: 'main-pagination'
  },
  loading: {
    type: Boolean,
    default: true
  },
  showAction: {
    type: Boolean,
    default: true
  },
  actionConfig: {
    type: Object,
    default: () => ({})
  },
  maxHeight: {
    type: String,
    default: ''
  },
  height: {
    type: String,
    default: '100%'
  }
})

const emits = defineEmits([
  'sizeChange',
  'currentChange',
  'handleCurrentChange',
  'handleSelectionChange',
  'update: loading'
])

const sizeChange = (val: number) => {
  emits("sizeChange", val)
}

const currentChange = (val: number) => {
  emits("currentChange", val)
}

const handleCurrentChange = (val: any) => {
  emits("handleCurrentChange", val)
}

const handleSelectionChange = (val: any) => {
  emits("handleSelectionChange", val)
}

</script>

<style scoped>

</style>